<template>
  <van-list
    class="listBox"
    v-model:loading="state.loading"
    :finished="state.finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in newsList" :key="item">
      <li class="liTate" :key="item.date">
        <span>{{ timeTranslate(item.date) }}</span>
        <p></p>
      </li>
      <ul>
        <router-link
          :to="{ name: 'Detail', query: { id: obj.id } }"
          custom
          v-slot="{ href, navigate, isActive }"
          v-for="obj in item.stories"
          :key="obj.id"
        >
          <li :active="isActive" :href="href" @click="navigate">
            <div class="lileft">
              <p>{{ obj.title }}</p>
              <p>{{ obj.hint }}</p>
            </div>
            <img :src="obj.images ? obj.images[0] : ''" alt />
          </li>
        </router-link>
      </ul>
    </van-cell>
  </van-list>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { fmtDate } from "@/utils/filters";
import {
  timeTranslate,
  getBeforeData,
} from "@/views/Home/components/List/banner";
export default defineComponent({
  props: {
    newsList: {
      default: () => [],
      type: Array,
    },
  },
  setup(props, context) {
    const state = ref({
      loading: false,
      finished: false,
    });
    let dayNum = ref<number>(1);
    const onLoad = async () => {
      if (props.newsList.length == 0) {
        state.value.loading = false;
        return;
      }
      let obj = await getBeforeData(
        fmtDate(new Date().getTime() - dayNum.value * 86400000, "yyyyMMDD")
      );
      context.emit("update:newsList", props.newsList.push(obj));
      state.value.loading = false;
      dayNum.value += 1;
    };
    return { state, timeTranslate, onLoad };
  },
});
</script>

<style lang='scss' scoped>
.listBox {
  width: 100%;
  img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.05rem;
  }
  ul {
    li {
      display: flex;
      padding: 0.1rem 0;
      border-bottom: 0.01rem solid #eee;
      .lileft {
        flex: 1;
        p {
          font-weight: 700;
          margin-top: 0.05rem;
          font-size: 0.18rem;
        }
        p:nth-child(2) {
          font-weight: 100;
          font-size: 0.14rem;
        }
      }
    }
    li:nth-last-child(1) {
      border: none;
    }
  }
  .liTate {
    display: flex;
    align-items: center;
    color: #aaa;
    font-size: 0.14rem;
    border: none;
    span {
      margin: 0 0.1rem;
    }
    p {
      flex: 1;
      height: 1px;
      display: inline-block;
      background: #ccc;
    }
  }
}
</style>